<html>
<head>

	<!-- jQueryMobile CSS -->
	<link rel="stylesheet" href="resources/jquery.mobile-1.0a4.1.min.css" type="text/css">
	<!-- jquery. mandatory as the plugin uses it -->
	<script type="text/javascript" src="resources/jquery-1.6.1.min.js"></script>
	<!-- jQueryMobile JS -->
	<script type="text/javascript" src="resources/jquery.mobile-1.0a4.1.min.js"></script>
	<!-- jQuery touch area plugin: http://code.google.com/p/jquery-touch-area/ -->
	<script type="text/javascript" src="jquery.toucharea.js"></script>
	<!-- plugin carousel code -->
	<script type="text/javascript" src="jquery.carousel.js"></script>
	<!-- plugin windmill carousel code -->
	<script type="text/javascript" src="jquery.windmillcarousel.js"></script>

<style type="text/css">

ul[data-carousel="windmill"],
ul[data-carousel="true"] {
	height: 300px;
	
	line-height: 300px;
	text-align: center;
}

ul[data-carousel="windmill"] > li,
ul[data-carousel="true"] > li {
	border: 1px solid blue;
	font-size: 4em;
}

</style>
</head>

<body>
	<div data-role="page" id="main">
		<div data-role="header">
			<h1>Carousel Demo</h1>
		</div>
		<div>
			<ul data-carousel="windmill">
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
				<li>Four</li>
				<li>Five</li>
			</ul>
		</div>
		
<!-- 		<div> -->
<!-- 			<ul data-carousel="true"> -->
<!-- 				<li>One</li> -->
<!-- 				<li>Two</li> -->
<!-- 				<li>Three</li> -->
<!-- 				<li>Four</li> -->
<!-- 				<li>Five</li> -->
<!-- 			</ul> -->
<!-- 		</div> -->
	</div>
	
</body>
</html>